<template>
	<el-dialog width="99%" :close-on-click-modal="false" v-model="dialogVisible" :title="state.title" destroy-on-close :before-close="handleClose">
		<PackList
			class="pack-info"
			v-if="state.form.id"
			type="edit"
			:exportUrl="[
				'/wms/outbound/exportPackDetail', // 导出明细
				'/wms/outbound/exportPackInfo', // 导出合计
			]"
			:data="{
				id: state.form.id,
				boxNumSum: state.form.boxNumSum,
				boxWeightSum: state.form.boxWeightSum,
				deliveryPackItemList: state.form.deliveryPackItemList,
				deliveryPackList: state.form.deliveryPackList,
				specBoxWeightList: state.form.specBoxWeightList,
				packType: state.form.packType,
			}"
			ref="packListRef"
		/>
		<template #footer>
			<el-button type="" @click="handleClose">取消</el-button>
			<el-button type="primary" @click="submit">完成装箱</el-button>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup  name="encasementDialog">
import { ElMessage } from 'element-plus';
import { getOutboundDetail, completePack, batchCompletePack } from '../api.ts';
const state = reactive({
	title: '装箱',
	id: '',
	form: {},
});
const emit = defineEmits(['refresh']);
const dialogVisible = ref(false);
const packListRef = ref();
// 获取详情
const getDetail = async () => {
	try {
		const { data } = await getOutboundDetail(state.currentRow.id);

		state.form = JSON.parse(JSON.stringify(data));
	} catch (error) {
		ElMessage({
			message: error.msg,
			type: 'error',
		});
	}
};
// 打开弹窗
const openDialog = async (row) => {
	state.currentRow = row;
	if (row.statusCode === 5) {
		await batchCompletePack([row.id], false);
	}
	getDetail();
	dialogVisible.value = true;
};
// 关闭弹窗
const handleClose = () => {
	dialogVisible.value = false;
};
const submit = () => {
	const result = packListRef?.value?.packagesInfo();
	if (result?.id) {
		let params = Object.assign(state.form, result);
		completePack(params).then((res) => {
			if (res.code == 0) {
				ElMessage({
					message: res.msg || '修改成功！',
					type: 'success',
				});
				handleClose();
				emit('refresh');
			}
		});
	}
};
defineExpose({
	openDialog,
});
onMounted(() => {});
</script>
<style scoped>
.pack-info :deep(.settings) {
	min-width: auto;
}
.pack-info :deep(.yz .etable) {
	min-width: 1200px;
}
.pack-info :deep(.tableout) {
	height: 60vh;
}
</style>
